<script setup>
import { onMounted, reactive } from 'vue';
import axios from "axios";

let listData = reactive({ list: [] });
const getData = function () {
    axios.post('http://10.59.30.132:8001/api/Robot/GetInspectionTaskData?RobotId=1&Num=20').then(res => {
        listData.list = JSON.parse(res.data.Content);
    })
}
onMounted(() => {
    getData();
    setInterval(() => {
        getData();
    }, 30 * 1000)
})
const link = function () {
    window.open('http://192.168.34.90:20060/MainPage/Robot/Main/?RobitId=1')
}

</script>
<template>
    <div class="Robot">
        <div class="title" @click="link"></div>
        <div class="iframe">
            <table border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>任务点名称</th>
                        <th>仪表名称</th>
                        <th>仪表值</th>
                        <th>时间</th>
                    </tr>
                </thead>
                <vue3-seamless-scroll hover-stop="true" :list="listData.list" hover="true" step="0.3">
                    <tbody>
                        <tr v-for="(item, index) in listData.list" :key="index">
                            <td>{{ item.AreaName }}</td>
                            <td :title="item.DeviceName">{{ item.DeviceName }}</td>
                            <td>{{ item.ReadValue + item.Unit }}</td>
                            <td>{{ item.Time }}</td>
                        </tr>
                    </tbody>
                </vue3-seamless-scroll>
            </table>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.Robot {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.title {
    height: .26rem;
    width: 50%;
    background-image: url('@/assets/title/Robot.png');
    background-repeat: no-repeat;
    background-size: .4115rem .1406rem;
    background-position: .0521rem 50%;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
    padding: .0521rem .1042rem;
    overflow: hidden;
}

table>div {
    overflow: hidden;
}

thead {
    overflow: hidden;
    z-index: 10;
}

thead th {
    height: .2083rem;
    font-size: .0625rem;
    font-weight: 500;
    color: #FFFFFF;
    background-color: #0a3876;
    text-align: center;
}

tbody td {
    height: .2083rem;
    font-size: .0625rem;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
}

tbody {
    width: 100%;
    overflow: hidden;
}

tbody tr {
    border-bottom: .0052rem solid rgba(7, 219, 255, 0.52);
}

thead,
tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
}

td {
    height: .2083rem;
    line-height: .2083rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


th:nth-child(1) {
    width: 25%;
}

th:nth-child(2) {
    width: 25%;
}

th:nth-child(3) {
    width: 25%;
}

th:nth-child(4) {
    width: 25%;
}

.iframe {
    padding: 0 .07rem;
}
</style>